<template>
	<view class="bg-white">
		<cu-custom bgColor="bg-white" :isBack="true">
		    <block slot="content">新的朋友</block>
		</cu-custom>
		
		<view class="cu-bar search bg-white">
		    <view class="search-form round">
		        <text class="cuIcon-search"></text>
		        <input  :adjust-position="false" type="text" placeholder="搜索"
		            confirm-type="search"></input>
		    </view>
		</view>
		
		<view class="chat_content">
			<block v-if="chat_list.length > 0">
				<view class="flex align-center justify-between friend_item" v-for="(item,index) in chat_list" :key="index">
					<view class="flex align-center">
						<view class="position_realtive">
							<image class="cu-avatar lg round   margin-right-sm" :src="item.avatar" mode="aspectFit"></image>
							<view v-if="item.has_new" class="avatar_badge"></view>
						</view>
						
						<view>
							<view class="nickname"> {{item.nickname}}</view>
							<view class="text-grey">{{item.last_msg}}</view>
						</view>
					</view>
					<view class="text-center">
						 <view class="agree_btn">同意</view>
					</view>
				</view>
			</block>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chat_list : [
					  {
						"id": 1,
						"avatar": "https://ds.js.design/assets/img/d6bc3d319995a8ea550b594c9a4de7b9.png",
						"nickname": "黑不溜秋黑不溜秋黑不溜秋黑不溜秋",
						"last_msg": "明天见面如何?",
						"last_time": "05:45",
						"unread_num": 3,
						"has_new": true
					  },
					  {
						"id": 2,
						"avatar": "https://ds.js.design/assets/img/df0aa582223c03e9030ce86abc16f4fc.png",
						"nickname": "小白",
						"last_msg": "最近怎么样?",
						"last_time": "10:30",
						"unread_num": 1,
						"has_new": true
					  },
					  {
						"id": 3,
						"avatar": "https://ds.js.design/assets/img/59a5bde80b3e05d3ebff1cf87e68b32a.png",
						"nickname": "阿辉",
						"last_msg": "有空一起吃饭?",
						"last_time": "14:15",
						"unread_num": 5,
						"has_new": false
					  },
					  {
						"id": 4,
						"avatar": "https://ds.js.design/assets/img/55f6737f26ad01a273e91a3b3417f2a1.png",
						"nickname": "晴天",
						"last_msg": "周末去爬山吧!",
						"last_time": "18:50",
						"unread_num": 0,
						"has_new": false
					  },
					  {
						"id": 5,
						"avatar": "https://ds.js.design/assets/img/f211d008436da84f4dc66727dd5d8ba9.png",
						"nickname": "大壮",
						"last_msg": "项目进展如何?",
						"last_time": "20:20",
						"unread_num": 2,
						"has_new": true
					  },
					  {
						"id": 6,
						"avatar": "https://ds.js.design/assets/img/94de1dd0f10eee75f57dba5a0f2d85ca.png",
						"nickname": "小七",
						"last_msg": "一起打游戏吗?",
						"last_time": "22:10",
						"unread_num": 4,
						"has_new": true
					  }
					]
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
	.page {
		
	}
	.chat_content{
		padding: 30rpx 36rpx;
	}
	.avatar_badge {
		position: absolute;
		right: 20rpx;
		top: 0;
		background: rgba(255, 141, 26, 1);
		border: 2rpx solid rgba(255, 255, 255, 1);
		width: 22rpx;
		height: 22rpx;
		border-radius: 50%;
	}
	.new_msg_badge {
	  background: rgba(255, 141, 26, 1); /* 背景色 */
	  width: 32rpx;
	  height: 32rpx;
	  border-radius: 50%; /* 圆形 */
	  color: #fff;
	  font-size: 24rpx;
	  font-weight: bold;
	  text-align: center;
	  line-height: 32rpx; /* 让文字垂直居中 */
	  display: inline-block; /* 避免 inline 元素间距问题 */
	  margin-bottom: 5rpx;
	}
	.nickname{
		font-size: 30rpx;
		margin-bottom: 10rpx;
		max-width: 400rpx;
		color: rgba(15, 24, 40, 1);
	}
	
	.last_time{
		font-size: 24rpx;
		margin-top: 10rpx;
	}
	.friend_item{
		padding: 30rpx 0;
		border-bottom: 2rpx solid rgba(237, 237, 237, 1);;
	}
	.tips{
		border-radius: 40rpx;
		color: #fff;
		width: 140rpx;
		background: rgba(245, 127, 10, 1);
		font-size: 18rpx;
		text-align: center;
		padding: 10rpx 15rpx;
		margin-top: 20rpx;
	}
	.agree_btn{
		border-radius: 8rpx;
		background: rgba(254, 94, 41, 1);
		font-size: 22rpx;
		border-radius: 10rpx;
		padding: 10rpx 15rpx;
		color: #fff;
	}
</style>
